import { SetupContext, defineComponent, ref, computed, onMounted, nextTick, onUnmounted } from 'vue';
import { ExtendPanelPropsType, ExtendPanelProps } from './extend-panel.props';
import { useStyleVariable } from './composition/use-css-variable';
import { useClassName } from './composition/use-class-name';
import { useDomChange } from './composition/use-dom-change';
import { useEvents } from './composition/use-events';
import getItemRender from './components/item.component';
import './extend-panel.css';

export default defineComponent({
    name: 'FExtendPanel',
    props: ExtendPanelProps,
    emits: ['clickCover'],
    setup(props: ExtendPanelPropsType, context: SetupContext) {
        const extendPanelRef = ref<HTMLElement>();
        let checked = ref(undefined);
        const { coverWidth,contentWidth } = useDomChange(props, context, extendPanelRef);
        const { styleVariable, itemStyleVariable } = useStyleVariable(props, context, coverWidth, contentWidth);
        const { startTransitionClassName, checkedClassName } = useClassName(props, context,checked);
        const { onClickItem } = useEvents(props, context, extendPanelRef, coverWidth,checked);
        const itemRender = getItemRender(props, context, {
            onClickItem,
            checkedClassName,
            itemStyleVariable
        })
        return () => {
            return <div ref={extendPanelRef} class={startTransitionClassName.value}>
                <div class='f-extend-panel-layout' style={styleVariable.value}>
                    {itemRender()}
                </div>
            </div>;
        };
    }
});
